<template>
  <ADrawer class="ivz-preview-view" :visible="preview.status" height="100%" placement="top"
     @close="closeHandle" get-container=".lcd-dv-body" :closable="false"
           :wrap-style="{ position: 'absolute' }">
    <IvzPreviewSearch></IvzPreviewSearch>
    <IvzPreviewTable></IvzPreviewTable>
    <IvzPreviewEdit></IvzPreviewEdit>
    <div style="color: orange; font-size: 14px">注：预览时的数据都是模拟的[基于mockjs项目]</div>
  </ADrawer>
</template>

<!--预览界面-->
<script>
import {provide, reactive, watch} from 'vue'
import Preview from './index.js'
import IvzPreviewSearch from "@/components/preview/IvzPreviewSearch.vue";
import IvzPreviewTable from "@/components/preview/IvzPreviewTable.vue";
import IvzPreviewEdit from "@/components/preview/IvzPreviewEdit.vue";
import {mapGetters, mapMutations, mapState, useStore} from "vuex";

export default {
  name: "IvzPreview",
  components: {IvzPreviewEdit, IvzPreviewTable, IvzPreviewSearch},
  setup() {
    const context = reactive({})
    provide(Preview.PreviewProvideContext, context);
    return {context}
  },
  computed: {
    ...mapGetters(['preview'])
  },
  methods: {
    ...mapMutations(['switchPreviewTo']),
    closeHandle() {
      this.switchPreviewTo(false);
    }
  }
}
</script>

<style>
.ivz-preview-view {
  transform: unset!important;
}
</style>